<template>
    <v-layout column wrap>
        <v-flex>
            <v-layout>
                <v-flex fill-height xs2>
                    <v-menu 
                        ref="menu1"
                        :close-on-content-click="false"
                        v-model="menu1"
                        :nudge-right="40"
                        :return-value.sync="date1"
                        lazy
                        offset-y
                        min-width="190px"
                    >
                        <v-text-field 
                            slot="activator" 
                            v-model="date1"
                            label="开始时间"
                            prepend-icon="event"
                            readonly
                        ></v-text-field>
                        <v-date-picker v-model="date1" @input="$refs.menu1.save(date1)" locale="zh-cn"></v-date-picker>
                    </v-menu>
                </v-flex>

                <v-flex fill-height xs2>
                    <v-menu 
                        ref="menu2"
                        :close-on-content-click="false"
                        v-model="menu2"
                        :nudge-right="40"
                        :return-value.sync="date2"
                        lazy
                        offset-y
                        min-width="190px"
                    >
                        <v-text-field 
                            slot="activator" 
                            v-model="date2"
                            label="结束时间"
                            prepend-icon="event"
                            readonly
                        ></v-text-field>
                        <v-date-picker v-model="date2" @input="$refs.menu2.save(date2)" locale="zh-cn"></v-date-picker>
                    </v-menu>
                </v-flex>
                <v-spacer></v-spacer>
                <v-flex fill-height="" xs5>
                    <v-text-field
                        prepend-icon="search"
                        label="姓名、付款人银行卡号..."
                        v-model="search"
                        solo
                    >
                    </v-text-field>
                </v-flex>
            </v-layout>
        </v-flex>
        <v-flex>
            <v-card>
                <v-data-table 
                    :headers="tableHeaders"
                    :items="tableData"
                    v-model="selected"
                >
                    <template slot="items" slot-scope="props">
                        
                        <td>{{props.item.dateTime | dateServer}}</td>
                        <td>{{props.item.fromUser}}</td>
                        <td>{{props.item.fromAccount}}</td>
                        <td>{{props.item.fromBank}}</td>
                        <td>{{props.item.amount}}</td>
                        <td>{{props.item.fees}}</td>
                        <td>
                            <v-chip color="success" v-if="props.item.status" text-color="white" small>
                                <v-avatar>
                                    <v-icon>check_circle</v-icon>
                                </v-avatar>
                                成功
                            </v-chip>
                            <v-chip color="error" v-else text-color="white" small>
                                <v-avatar>
                                    <v-icon>cancel</v-icon>
                                </v-avatar>
                                失败
                            </v-chip>
                        </td>
                        <td>
                            <v-menu bottom left dark="">
                                <v-btn slot="activator" small icon>
                                    <v-icon>more_vert</v-icon>
                                </v-btn>
                                <v-list>
                                    <v-list-tile @click="">
                                        <v-list-tile-title>更新</v-list-tile-title>
                                    </v-list-tile>
                                    <v-list-tile @click="">
                                        <v-list-tile-title>删除</v-list-tile-title>
                                    </v-list-tile>
                                </v-list>
                            </v-menu>
                        </td>
                    </template>
                </v-data-table>
            </v-card>
        </v-flex>
    </v-layout>
</template>

<script>
    export default {
        name: 'User',
        data: () => ({
            drawer: true,
            search: '',
            selected: [],
            menu1: false,
            menu2: false,
            date1: '',
            date2: '',
            tableHeaders: [
                {
                    text: '交易时间',
                    value: 'dateTime',
                    sortable: false
                },
                {
                    text: '付款人',
                    value: 'fromUser',
                    sortable: false
                },
                {
                    text: '付款账号',
                    value: 'fromAccount',
                    sortable: false
                },
                {
                    text: '付款账号开户行',
                    value: 'fromBank',
                    sortable: false
                },
                {
                    text: '金额',
                    value: 'amount',
                    sortable: false
                },
                {
                    text: '手续费',
                    value: 'fees',
                    sortable: false
                },
                {
                    text: '交易状态',
                    value: 'status',
                    sortable: false
                },
                {
                    text: '',
                    value: '',
                    sortable: false
                }
            ],
            tableData: []
        }),
        mounted () {
            let _this = this
            _this.$api.get('/api/user', {}, res => {
                _this.tableData = res.data.data
            })
        }
    }
</script>

<style scoped>

</style>